<template>
  <el-drawer title="建议内容" size="600px" :with-header="false" :visible.sync="drawer">
    <div class="advice-box">
      <div v-if="messageType === 'check'">
        <div class="advice-content">
          <div class="advice-title">留言内容</div>
          <div class="advice-option">
            <div class="left">项目名称：</div>
            <span>{{messageData.projectName}}</span>
          </div>
          <el-row>
            <el-col :span="12">
              <div class="advice-option">
                <div class="left">发起人：</div>
                <span style="font-size: 15px;">{{ messageData.creatorRealName }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="advice-option">
                <div class="left">发起时间：</div>
                <span style="font-size: 15px;">{{ messageData.createTime }}</span>
              </div>
            </el-col>
          </el-row>
          <div class="advice-option">
            <div class="left">留言内容：</div>
            <div class="content">{{ messageData.content }}</div>
          </div>
        </div>
        <div class="advice-history" v-if="historyMessage.length > 0">
          <div class="advice-title">历史回复</div>
          <div v-for="(item, index) in historyMessage" :key="index">
            <div class="history-box">
              <div style="flex: 1;">
                <div style="color: #000000;font-weight: bold;word-break: break-all;">{{item.content}}</div>
                <div style="margin-top:10px; font-size: 14px;"><span>{{item.createTime}}</span> <span>{{item.replierRealName}}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="advice-add">
          <div class="advice-title">新增留言</div>
          <el-form ref="ruleForm" :model="form" :rules="rules" label-position="right" label-width="80px">
            <el-form-item label="项目名称" prop="projectIdList">
              <div class="project-select" @click="selectProject">
                <span>
                  <span v-if="projectName">{{projectName}}</span>
                  <span v-else>请选择项目名称</span>
                </span>
                <span v-if="projectName" class="icon" @click.stop="clearProject"><i class="el-icon-circle-close"></i></span>
              </div>
            </el-form-item>
            <el-form-item label="留言内容" prop="content">
              <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.content"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="advice-submit">
        <el-button v-if="messageType === 'add'" type="primary" @click="cancel">取消</el-button>
        <el-button v-if="messageType === 'add'" type="primary" @click="add('ruleForm')">新增</el-button>
        <el-button v-if="messageType === 'check'" type="primary" @click="submit">确认</el-button>
      </div>
    </div>
    <ProjectConfigModal ref="projectConfigRef" @update="changeProject" />
  </el-drawer>
</template>
<script>
import { queryMessageReply, addMessage } from '@/api/singleraView/message'
import ProjectConfigModal from '@/views/auditManagement/projectConfiguration/projectConfigModal.vue'
export default {
  data() {
    return {
      drawer: false,
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      projectList: [],
      messageData: {},
      historyMessage: [],
      form: {
        content: '',
        projectIdList: [],
      },
      projectName: '',
      messageType: 'add',
      rules: {
        projectIdList: [
          { type: 'array', required: true, message: '请选择项目', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入留言', trigger: 'blur' }
        ],
      }
    }
  },
  components: {
    ProjectConfigModal
  },
  methods: {
    init(id, data){
      this.drawer = true
      if(id) {
        this.messageData = data
        this.messageType = 'check'
        queryMessageReply(id).then(res => {
          this.historyMessage = res
        })
      } else {
        this.form.content = ''
        this.form.projectIdList = []
        this.messageType = 'add'
      }
    },
    cancel() {
      this.drawer = false
    },
    selectProject(){
      this.$refs.projectConfigRef.getInit()
    },
    clearProject(){
      this.form.projectIdList = []
      this.projectName = ''
    },
    changeProject(item){
      this.form.projectIdList = []
      this.form.projectIdList.push(item.value)
      this.projectName = item.name
    },
    add() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          addMessage(this.form).then(res => {
            this.drawer = false
          })
        }
      })
    },
    submit() {
      this.drawer = false
    }
  }
}
</script>
<style scoped lang="scss">
.advice-box{
  position: relative;
  padding: 20px;
  height: 100%;
  overflow: auto;
  .advice-title{
    font-weight: bold;
    font-size: 18px;
    margin: 20px 0 15px 0;
  }
  .advice-option{
    padding: 10px 0;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    .content{
      flex: 1;
    }
    .left{
      width: 80px;
    }
  }
  .history-box{
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #bfbfbf;
    padding: 10px;
    border-radius: 5px;
    background: #bfbfbf;
  }
  .advice-submit{
    margin: 20px 0;
    text-align: center;
  }
}
.project-select{
  width: 200px;
  height: 34px;
  background: #FFFFFF;
  border-radius: 5px;
  color: #C0C4CC;
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid #DCDFE6;
  position: relative;
  overflow: hidden;
  .icon{
    position: absolute;
    right: 5px;
    top: 0;
  }
}
</style>
